<!DOCTYPE html>
<html>
<head>
    <title>攻略系列</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/strategyCatalogs.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="/js/common.js"></script>

    <script>
        $(function () {
            var params = getParams();
            if (params.id) {
                //页面刷新时增加浏览量
                $.ajax({
                    type:"PUT",
                    url:"/strategies/"+params.id
                })

                $.get("/strategies/"+params.id,function (data) {
                    $(".strategies").renderValues(data);
                })
                //获取大家都在看内容
                $.get("/strategies/"+params.id+"/travels",function (data) {
                    $(".hot").renderValues({list:data}, {
                        setHref:function (item,value) {
                            $(item).attr("href", $(item).data("href") + value);
                        }
                    })

                })

                //获取普通页面内容,01~10标签中的内容
                var index=1;
                $.get("/strategyCatalogs/" + params.id, function (data) {
                    $(".catalogs").renderValues({list:data},{
                        setName:function (item, value) {
                            if(index<10){
                                 $(item).html("0"+index+"/"+value)
                            }else{
                                $(item).html(index+"/"+value)
                            }
                            index++;
                        },
                        setHref:function (item,value) {
                            $(item).attr("href", $(item).data("href") + value);
                        }
                    })
                })

                //根据攻略的strategyId查询出标签
                $.get("/tag/"+params.id,function (data) {
                    $(".tag").renderValues({list:data});
                });

                //查询当前页面的评论
                var currentPage=1;
                var totalPage=1;
                var pageSize=1;
                var dataList = [];
                $.get("strategyComments",{currentPage:currentPage,strategyId:params.id},function (data) {
                    //总页数
                    var totalPage = data.pages;
                    //数组的结合
                    $.merge(dataList, data.list);
                    $("#comment").renderValues({list:dataList},{
                        setUserHerf:function (item, value) {
                            $(item).attr("href", $(item).data("href") + value);
                        },
                        setStar:function (item,value) {
                            var starthtml = '';
                            var unStarthtml = '';
                            var value = parseInt(value);

                            for (var i = 0; i < value; i++) {
                                starthtml += '<i class="fa fa-star"></i>';
                            }
                            for (var i = 0; i < 5 - value; i++) {
                                unStarthtml +='<i class="fa fa-start-o"></i>'
                            }
                            $(item).html(starthtml + unStarthtml);
                        },
                        setCommentHref: function (item, value) {
                            $(item).attr('href',$(item).data('href')+value)
                        }
                    })
                    //创建点击图片事件
                    $(".comment-img img").click(function () {
                        $(document).dialog({
                            titleShow:false,
                            overlayClose:true,
                            content:'<div style="text-align: center;"><img width="100%" src="'+$(this).attr('src')+'"></div>'
                        });
                    })
                })
                currentPage +=1;
            }


            // 滑动条滚动时触发事件
            $(window).scroll(function () {
                    if (!$('#pills-catalog-tab').hasClass("active show")) {
                        // 手机屏幕大小 + 滚动高度 >= 数据高度 :: 拉到底部执行
                        if ($(window).height() + $(document).scrollTop() >= $(document).height()) {

                            if (currentPage <= totalPage) {
                                query();
                            } else {
                                $(document).dialog({
                                    type: 'notice',
                                    infoText: '已经到底啦!',
                                    autoClose: 2000,
                                    position: 'bottom'  // center: 居中; bottom: 底部
                                });
                            }
                        }
                    }
                }
            );
            var id = getParams().id;
            $("#commentBtn").click(function () {
                window.location.href = "/mine/strategyComment.html?strategyId=" + id;
            })

            var userStr = sessionStorage.getItem("user");
            var user;
            if (userStr) {
                user = JSON.parse(userStr);
                $(".info").renderValues(user);
            }else{
                $("#collectBtn").addClass("fa-heart-o");
            }

            //收藏和取消收藏功能、收藏数显示
            //begin----------------------------------------------
            //统计收藏数
            var collectClickCount=0;
            var collectCount;
            var flag;//奇数表示已收藏，偶数表示未收藏
            $.get("/strategies/collectCount",{"strategyId":params.id},function (data) {
                collectCount = data;
                $("#collectBtn").text(" "+collectCount);
            })

            //显示收藏按钮的样式
            if(userStr){
                $.get("/strategies/"+user.id+"/"+params.id,function (data) {
                    if(data==true){
                        $("#collectBtn").addClass("fa-heart");
                        flag=1;
                    }else{
                        $("#collectBtn").addClass("fa-heart-o");
                        flag=2;
                    }
                })
            }

            //收藏按钮的点击事件
            $("#collectBtn").click(function () {
                if(!userStr){
                    $(document).dialog({
                        type: 'notice',
                        infoText: '请先登录!',
                        autoClose: 2500,
                        position: 'center'  // center: 居中; bottom: 底部
                    });
                }
                if(collectClickCount<5){
                    if(flag%2==0){//如果未收藏
                        $(this).removeClass("fa-heart-o");
                        $(this).addClass("fa-heart");
                        $.post("/strategies/"+user.id,{"StrategyId":params.id},function (data) {

                        });
                        collectCount+=1;
                        $("#collectBtn").text(" "+collectCount);
                        flag = 1;
                    }else{
                        $(this).removeClass("fa-heart");
                        $(this).addClass("fa-heart-o");
                        $.ajax({
                            type:"DELETE",
                            url:"/strategies/"+user.id,
                            data:{"strategyId":params.id},
                        })
                        collectCount -= 1;
                        $("#collectBtn").text(" " + collectCount);
                        flag = 2;
                    }
                }else{
                    $(document).dialog({
                        type: 'notice',
                        infoText: '操作太频繁啦!',
                        autoClose: 2500,
                        position: 'bottom'  // center: 居中; bottom: 底部
                    });
                }
                collectClickCount++;
            })
            //end----------------------------------------------------------
            //页面点赞渲染

            var userStr = sessionStorage.getItem("user");
            var user = JSON.parse(userStr);
            var userId= user.id
            var catalogs = getParams()
            var catalogsId =catalogs.id
            //查看当前用户是否被点赞
            $.get("/strategyCatalogs/chose/"+catalogsId+"/"+userId, function (data) {
                console.log(data.data);
                $("#heart").renderValues(data);
                if (data.success) {
                    $("#heart").removeClass("fa-thumbs-o-up");
                    $("#heart").addClass("fa-thumbs-up");
                    $("#heart").css("color", "#00adff");
                } else {
                    $("#heart").removeClass("fa-thumbs-up");
                    $("#heart").addClass("fa-thumbs-o-up");
                    $("#heart").css("color", "#00adff");
                }
            });
            //创建点击事件修改点赞

            //给点赞绑定事件
            $("#heart").click( function () {
                var user = JSON.parse(sessionStorage.getItem("user"))
                var userId = user.id;



                $.get("/strategyCatalogs/chose/"+catalogsId+"/" + userId,function (data) {
                    //data为false表示后台不存在点赞记录
                    if (!(data.success)) {

                        //点赞
                        $.post("/strategyCatalogs/insertChose/"+catalogsId+"/"+userId,function (data1) {
                            if (data1) {
                                window.location.reload();
                            }
                        })
                        //若data为true说明数据库中存在该数据,取消点赞
                    }else {
                        $.ajax({
                            url: "/strategyCatalogs/deleteChose/" +catalogsId+"/"+userId,
                            type: "DELETE",
                            success: function (data2) {
                                console.log(data2);
                                console.log("data2");
                                if (data2.success) {
                                    window.location.reload();
                                }
                            }
                        })
                    }
                })


                //如果查不到用户，说明没登录
                if (!userId) {
                    $(document).dialog({
                        titleShow: false,
                        content: '请先登录',
                    });
                    return;
                }
            })

            $(".searchBtn").keydown(function(event) {
                if(event.keyCode==13){
                    var keyword = $(".searchBtn").val();
                    $.get("/search", {"keyword": keyword, "type": "strategies"}, function (data) {
                        var result = JSON.stringify(data)
                        sessionStorage.setItem("result",result);
                        location.href = "/searchResult.html";
                    })

                }
            })
        })
    </script>

</head>

<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col-2">
            <a href="javascript:history.go(-1);">
                <span><i class="fa fa-chevron-left fa-2x"></i></span>
            </a>
        </div>
        <div class="col-10">
            <div class="input-group-sm search">
                <input class="form-control searchBtn" placeholder="搜索旅行攻略">
            </div>
        </div>
    </div>
</div>

<div class="container strategies">
    <h5 class="title" render-html="title"></h5>
    <small><span render-html="viewCount">0</span>人阅读过此攻略</small>
    <div class="focus">
        <i class="fa" id="collectBtn"></i><span>收藏</span>
        <i class="fa"><span id="heart" render-html="data"></span> 点赞</i>
        <button class="btn">想去</button>
        <button class="btn">去过</button>
    </div>
</div>
<ul class="nav nav-pills nav-justified border border-left-0 border-top-0 border-right-0" id="pills-tab">
    <li class="nav-item ">
        <a class="nav-link active" id="pills-catalog-tab" data-toggle="pill" href="#pills-catalog">
            <span>攻略目录</span>
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link " id="pills-comment-tab" data-toggle="pill" href="#pills-comment">
            <span>骡友点评</span>
        </a>
    </li>
</ul>
<div class="tab-content " id="pills-tabContent">
    <div class="tab-pane fade show active" id="pills-catalog">
        <div class="container hot">
            <h6>大家都在看</h6>
            <div render-loop="list">
                <a data-href="travelContent.html?id=" render-fun="setHref" render-key="list.id">
                    <button class="btn" render-html="list.title"></button>
                </a>
            </div>
        </div>

        <div class="catalogs">
            <!--攻略分类的循环-->
            <div  render-loop="list">
                <div class="container detail">
                    <h6 render-fun="setName" render-key="list.name"></h6>
                    <!--攻略明细的循环-->
                    <div render-loop="list.details">
                        <a data-href="/strategyDetails.html?id=" render-fun="setHref" render-key="list.details.id">
                        <button class="btn" render-html="list.details.title"></button>
                        </a>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <div class="tab-pane fade " id="pills-comment">

        <div class="container tag">
            <h6>骡友标签</h6>
            <div render-loop="list">
                <span render-html="list.name"></span>
            </div>
        </div>
        <hr>

        <div id="comment">
            <div render-loop="list">
                <div class="container row comment">
                    <div class="col-2 comment-head">
                        <a data-href="/mine/userProfiles.html?id=" render-fun="setUserHerf"
                           render-key="list.user.id">
                            <img class="rounded-circle"
                                 render-src="list.user.headImgUrl">
                        </a>
                    </div>
                    <div class="col comment-right">
                        <span render-html="list.user.nickName"></span></p>
                        <div class="comment-content">

                             <span class="comment-star" render-fun="setStar" render-key="list.starNum"></span>


                            <a data-href="/strategyComment.html?id=" render-fun="setCommentHref"
                               render-key="list.id">
                                <p render-html="list.content"></p>
                            </a>
                        </div>

                        <ul class="comment-img" render-loop="list.imgUrlsArr">
                            <li>
                                <img render-src="list.imgUrlsArr.self">
                            </li>
                        </ul>

                        <div class="d-flex icon">
                            <a data-href="/strategyComment.html?id=" render-fun="setCommentHref"
                               render-key="list.id">
                                <i class="fa  fa-commenting-o " style="margin-right: 10px"> 评论 </i>
                                <i class="fa fa-thumbs-o-up"> <span>0</span> </i>
                            </a>
                        </div>

                    </div>
                </div>

            </div>
        </div>
    </div>

</div>
</div>

<div class="operation">
    <button class="btn">加入旅行单</button>
    <button class="btn" id="commentBtn">点评</button>
</div>


</body>
</html>